import {Menu, Row, Col, Input, Space} from 'antd';
import { HomeOutlined, HeartOutlined, CodeOutlined, FormOutlined, GithubOutlined } from '@ant-design/icons';
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import './TopMenu.less';

const { Search } = Input;

class TopMenu extends Component {
    state = {
        current: 'home',
    };

    handleClick = e => {
        this.setState({ current: e.key });
    };


    render() {
        const { current } = this.state;
        const onSearch = value => console.log(value);
        return (
            <Row className="blog-menu-top">
                <Col span={4} className={'web-title'}>
                    <span>
                        冷瞳和喵喵的窝
                    </span>
                </Col>
                <Col span={6}>
                    <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
                        <Menu.Item key="home" icon={<HomeOutlined /> } className={'nav-item'}>
                            <Link to="/">
                                首页
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="life" icon={<HeartOutlined />} className={'nav-item'}>
                            <Link to="/main/life">
                                生活
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="code" icon={<CodeOutlined />} className={'nav-item'}>
                            <Link to="/main/code">
                                技术
                            </Link>
                        </Menu.Item>
                        {this.props.children}
                    </Menu>
                </Col>
                <Col span={6} className={'blog-search'}>
                    <Search
                        placeholder="你想找点什么~"
                        allowClear
                        enterButton="搜索"
                        size="large"
                        onSearch={onSearch}
                    />
                </Col>
                <Col span={8}>
                    <ul id='menu-ui'>
                        <a><li><GithubOutlined /></li></a>
                        <a href={'/write'} target={'_blank'}><li ><FormOutlined /></li></a>
                    </ul>
                </Col>
            </Row>

        );
    }
}

export default TopMenu;